<template>
  <div class="main-container">
    <timeSelect/>
    <div class="nav-bind">
      <ul class="flex-box">
        <li class="flex-box"><div class="flex-box"><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-diary-assignment"></use>
            </svg></div><p>备忘</p></li>
        <li class="flex-box"><div class="flex-box"><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-diary-find-in-page"></use>
            </svg></div><p>待办</p></li>
        <li class="flex-box"><div class="flex-box"><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-diary-person-pin-circle"></use>
            </svg></div><p>轨迹</p></li>
        <li class="flex-box"><div class="flex-box"><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-diary-local-laundry-servic"></use>
            </svg></div><p>心情</p></li>
      </ul>
    </div>
    <circleNav/>
  </div>
</template>

<script>
// @ is an alias to /src
// import autoPrefix from "@/assets/js/common/autoprefix";
import timeSelect from "@/components/need-components/time_select.vue";
import circleNav from "@/components/need-components/circle_nav.vue";
export default {
  name: "ArticleGuanZhu",
  data() {
    return {
      lists: ""
    };
  },
  components: {
    timeSelect,
    circleNav
  },
  computed: {},
  filters: {},
  methods: {},
  mounted() {}
};
</script>
<style scoped lang="scss">
.main-container {
  width: 100%;
  height: 100%;
}
.nav-bind {
  width: 100%;
  height: r(220);
  padding-left: r(16);
  padding-right: r(16);
  box-sizing: border-box;
  ul {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: r(18);
    margin-top: r(28);
    li {
      width: 25%;
      float: left;
      flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      div {
        width: r(108);
        height: r(108);
        border-radius: 100px;
        font-size: r(60);
        color: #fff;
      }
      &:first-child {
        div {
          background: -webkit-linear-gradient(150deg, #46a0ee, #7ad6fd);
          background: linear-gradient(150deg, #46a0ee, #7ad6fd);
        }
      }
      &:nth-child(2) {
        div {
          background: -webkit-linear-gradient(150deg, #7e7bff, #bba2f5);
          background: linear-gradient(150deg, #7e7bff, #bba2f5);
        }
      }
      &:nth-child(3) {
        div {
          background: -webkit-linear-gradient(150deg, #46a0ee, #7ad6fd);
          background: linear-gradient(150deg, #46a0ee, #7ad6fd);
        }
      }
      &:last-child {
        div {
          background: -webkit-linear-gradient(150deg, #ff3b9d, #fc96c5);
          background: linear-gradient(150deg, #ff3b9d, #fc96c5);
        }
      }
      p {
        width: 100%;
        text-align: center;
        font-size: r(28);
        line-height: r(30);
        color: #4797cc;
        margin-top: r(12);
      }
    }
  }
}
</style>
